<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue'
import { admerRegisterAPI } from '@/apis/admer';
const form = ref({
    account: 'hbnu123456',
    password: '123456',
    ckpwd: '123456'
})
const rules = {
    account: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        { pattern: /^hbnu\d{6}$/, message: "格式错误", trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 15, message: '密码长度为6-14个字符', trigger: 'blur' },
    ],
    ckpwd: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 15, message: '密码长度为6-14个字符', trigger: 'blur' },
    ],
}
const formRef = ref(null)
const doLogin = () => {
    const { account, password, ckpwd } = form.value
    if (password != ckpwd) {
        ElMessage({ type: 'info', message: '密码前后不一致' })
        return
    }
    // 调用实例方法
    formRef.value.validate(async (valid) => {
        // valid: 所有表单都通过校验  才为true

        // 以valid做为判断条件 如果通过校验才执行登录逻辑
        if (valid) {

            const res = await admerRegisterAPI(account, password);
            if (res.code == 1) {
                ElMessage({ type: "success", message: '注册成功' })
            }
            else ElMessage({ type: "error", message: "账号重复" })
        }
    })
}
</script>
<template>
    <el-main>
        <el-form ref="formRef" :model="form" :rules="rules"
            style="width: 500px;height: 200px;margin: 0px auto;padding:50px;box-shadow:0 10px 5px 5px #cdcdcd ;"
            label-width="80px">
            <el-form-item prop="account" label="账户">
                <el-input v-model="form.account" />
            </el-form-item>
            <el-form-item prop="password" label="密码">
                <el-input type="password" show-password v-model="form.password" />
            </el-form-item>
            <el-form-item prop="ckpwd" label="确定密码">
                <el-input type="password" show-password v-model="form.ckpwd" />
            </el-form-item>
            <el-button size="large" type="primary" style="width:100%" @click="doLogin">点击注册</el-button>
        </el-form>
    </el-main>
</template>